<template>
	<div class="home">
		<el-row :gutter="15">
			<el-col :span="6">
				<div class="card">
					<count-apps></count-apps>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="card">
					<count-users></count-users>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="card">
					<count-paid></count-paid>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="card">
					<count-sales></count-sales>
				</div>
			</el-col>
		</el-row>

		<el-row :gutter="15">
			<el-col :span="14">
				<div class="card">
					<tab-chart></tab-chart>
				</div>
			</el-col>
			<el-col :span="10">
				<div class="card">
					<sales-rank></sales-rank>
				</div>
			</el-col>
		</el-row>

		<el-row :gutter="15">
			<el-col :span="14">
				<div class="card card--last">
					<hot-search></hot-search>
				</div>
			</el-col>
			<el-col :span="10">
				<div class="card card--last">
					<category-ratio></category-ratio>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import CountApps from "@/components/home/count-apps";
import CountUsers from "@/components/home/count-users";
import CategoryRatio from "@/components/home/category-ratio";
import CountSales from "@/components/home/count-sales";
import CountPaid from "@/components/home/count-paid";
import TabChart from "@/components/home/tab-chart";
import SalesRank from "@/components/home/sales-rank";
import HotSearch from "@/components/home/hot-search";

export default {
	components: {
		CountApps,
		CountUsers,
		CategoryRatio,
		CountSales,
		CountPaid,
		TabChart,
		SalesRank,
		HotSearch
	},

	data() {
		return {};
	},

	methods: {}
};
</script>

<style lang="scss" scoped>
.home {
	overflow: hidden auto;

	.card {
		background-color: #fff;
		border-radius: 5px;
		margin-bottom: 15px;

		&--last {
			margin-bottom: 0;
		}
	}
}
</style>
